<template>
  <!-- 列表 -->
  <el-table
    :data="tableData.slice((pageNum - 1) * PageSize, pageNum * PageSize)"
    border
  >
    <el-table-column
      type="index"
      :index="indexMethod"
      label="序号"
    ></el-table-column>
    <el-table-column prop="dataSourceName" label="依赖数据源">
      <template slot-scope="scope">
        <div
          :class="scope.row.isClass"
          @click="isStyle(scope.row, 'isStyle', tableData)"
        >
          {{ scope.row.dataSourceName }}
        </div>
      </template>
    </el-table-column>

    <el-table-column prop="indexTypeName" label="指标集类型"> </el-table-column>

    <el-table-column prop="boardName" label="看板名称"> </el-table-column>
    <el-table-column label="计算sql">
      <template slot-scope="scope">
        <div
          :class="scope.row.isClass"
          @click="isStyle(scope.row, 'isStyle', tableData)"
        >
          {{ scope.row.indexSetCalcuSql }}
        </div>
      </template>
    </el-table-column>

    <el-table-column prop="indexSetCode" label="指标集编码"> </el-table-column>

    <el-table-column prop="updateTime" width="170px" label="更新时间">
    </el-table-column>
    <el-table-column label="操作" width="160px">
      <template slot-scope="scope">
        <el-button @click="handleEdit(scope.row)" type="primary" size="small"
          >编辑
        </el-button>

        <el-button @click="open(scope.row.id)" type="danger" size="small"
          >删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { RemovePort } from "@/assets/js/api";
export default {
  props: {
    tableData: {
      type: Array,
      default: null,
    },
    DropDown: {
      type: Array,
      default: null,
    },
    NameLi: {
      type: Array,
      default: null,
    },
    TheInterFace: {
      type: Array,
      default: null,
    },
    params: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      pageNum: 1,
      PageSize: 10,
      //弹窗表单
      ruleForm: {
        id: "",
        indexSetSourceId: "",
        indexSetBelongBoardId: "",
        indexSetTypeId: "",
        indexSetCalcuSql: "",
        createUser: "",
      },
    };
  },
  methods: {
    // 删除
    open(res) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let ros = { id: res };
          let add = await RemovePort(ros);
          if (add.code == 0) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.$emit("ConditionSearchEmpty", true);
          } else if (add.code == 1) {
            this.$message.error(add.msg);
          } else if (add.code == -2) {
            this.$message({
              type: "warning",
              message: add.msg,
            });
          } else {
            this.$message.error("删除失败!");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //  序号翻页连续排序
    indexMethod(index) {
      return (this.params.pageNum - 1) * this.params.pageSize + index + 1;
    },
    // 计算的隐藏与展开
    isStyle(val, className, data) {
      if (val.isClass == className) {
        data.forEach((s) => {
          if (s.id == val.id) {
            s.isClass = "";
          }
        });
      } else {
        data.forEach((s) => {
          if (s.id == val.id) {
            s.isClass = className;
          }
        });
      }
    },
    // 编辑按钮
    handleEdit(row) {
      this.$emit("pagingname", "编辑");
      this.$emit("JudgeConditions", true);
      this.$emit("isDialog", true);
      this.ruleForm = {
        id: row.id,
        indexSetCode: row.indexSetCode,
        indexSetSourceId: row.dataSourceName,
        indexSetBelongBoardId: row.boardName,
        indexSetTypeId: row.indexTypeName,
        indexSetCalcuSql: row.indexSetCalcuSql,
        createUser: row.createUser,
      };
      let TypqId = this.DropDown.map((item) => item.dataSourceName).indexOf(
        this.ruleForm.indexSetSourceId
      );
      this.ruleForm.indexSetSourceId = this.DropDown[TypqId].id;

      let add = this.NameLi.map((item) => item.boardName).indexOf(
        this.ruleForm.indexSetBelongBoardId
      );
      this.ruleForm.indexSetBelongBoardId = this.NameLi[add].id;

      let res = this.TheInterFace.map((item) => item.indexTypeName).indexOf(
        this.ruleForm.indexSetTypeId
      );
      this.ruleForm.indexSetTypeId = this.TheInterFace[res].id;

      this.$emit("ruleForm", this.ruleForm);
    },
  },
};
</script>

<style scoped>
.isStyle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>